<template>
  <div class="order_issue">
    <head-top head-title="立即发布" go-back="true"></head-top>
    <div class="issue_main">
      <div class="classfiy">
        <div class="line">
          查验类型选择
        </div>
        <div class="chose-btn" @click="choseType">
          <p>{{typeName}}</p>
        </div>
      </div>
      <div class="issue_input">
        <ul>
          <li class="special_li">
            <span>查验标题：</span>
            <input type="text" placeholder="请输入查验标题" v-model="checkTitle">
          </li>
          <li class="special_li">
            <span>订单酬金：<span style="color: red">￥</span></span>
            <input type="tel" placeholder="请输入金额" v-model.trim="money">
          </li>
          <li @click="openPicker">
            <span>截止时间：<span class="blue_font">{{showTime}}</span></span>
            <span class="point_out">></span>
          </li>
          <li @click="chosePlot">
            <span>查验地址：<span class="blue_font">{{homeName}}</span></span>
            <span class="point_out">></span>
          </li>
        </ul>
      </div>
      <div class="issue_text">
        <div class="issue_title">
          <span>查验简介</span>
        </div>
        <textarea @keyup="writeContent" @input="writeContent" name="" id="" placeholder="请输入相关的查验内容或需求..." cols="30"
                  rows="10" v-model="issueText"
                  maxlength="800"></textarea>
        <div class="count">
          {{currentCount}}/{{totalCount-currentCount}}
        </div>
      </div>
      <div class="issue_btn">
        <button @click="orderSub">确认发布</button>
      </div>
    </div>
    <!--时间选择弹窗-->
    <mt-datetime-picker
      v-model="pickerVisible"
      type="date"
      ref="picker"
      year-format="{value}年"
      month-format="{value}月"
      date-format="{value}日"
      @confirm="handleConfirm">
    </mt-datetime-picker>
    <!--查询地址(小区部分)弹窗-->
    <mt-popup
      v-model="addressShow"
      :closeOnClickModal="whetherShow"
      popup-transition="popup-fade" class="addressHeight">
      <div class="village">
        <div class="p_title">
          <div class="back_Arrow" @click="closeHousePopup">
            <span><</span>
          </div>
          <span>选择小区-{{cityName}}</span>
          <span @click="goCity">切换城市</span>
        </div>
        <div class="plot-wrapper">
          <div class="search">
            <div class="search-wrapper">
              <input type="text" placeholder="请输入小区的名称" v-model="keyword" @keyup.enter="searchVillage"
                     @input="searchVillage">
              <span class="search-icon" @click="searchVillage"></span>
            </div>
          </div>
        </div>
      </div>
      <mt-index-list>
        <mt-index-section :index="index" v-for="(item,index) in data" :key="index">
          <div v-for="(list,index) in item" @click="goIssue(list)">
            <mt-cell :title="list.title"></mt-cell>
          </div>
        </mt-index-section>
      </mt-index-list>
    </mt-popup>
    <!--查询地址（城市部分）弹窗-->
    <mt-popup
      v-model="cityShow"
      :closeOnClickModal="whetherShow"
      popup-transition="popup-fade" class="cityHeight">
      <div class="city_box">
        <div class="p_title">
          <div class="back_Arrow" @click="closePopup">
            <span><</span>
          </div>
          <span>城市选择</span>
          <span>&nbsp;</span>
        </div>
        <div class="current_city">
          <p>当前城市</p>
          <div class="location">
            <img src="../home/images/dingwei1@2x.png" alt="">
            <span v-html="cityName"></span>
          </div>
        </div>
        <!--可选区域-->
        <div class="line"></div>
        <div class="chose_area">
          <div class="chose_header">
            <span>可选区域</span>
          </div>
          <div class="area_chose clearfix">
            <ul>
              <li v-for="(item,index) in bills" :key="index" @click="selectStyle(item, item.id) "
                  :class="{'active':item.active,'unactive':!item.active}">
                <h4 ref="title">{{item.title}}</h4>
              </li>
            </ul>
          </div>
        </div>
        <!--热门城市-->
        <div class="line"></div>
        <div class="hot_city clearfix">
          <div class="hot_header">
            <span>热门城市</span>
          </div>
          <div class="hot_chose clearfix">
            <ul>
              <li v-for="(item,index) in lists"
                  :key="index"
                  @click="getStreet(item.id,item)"
                  :class="{'active':item.active,'unactive':!item.active}"
              >
                <p>{{item.title}}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </mt-popup>
    <!--类型选择弹窗-->
    <mt-popup
      v-model="popupVisible"
      :closeOnClickModal="closePopups"
      popup-transition="popup-fade" lockScroll="true" class="popup-box">
      <div class="box-main">
        <div class="box-top">
          <div class="close" @click="popupClose">×</div>
          <span>类型</span>
        </div>
        <div class="type-ul" v-for="(sort,sortindex) in sortArray">
          <div class="ul-title">
            <span>▎</span>{{sort.name}}
          </div>
          <ul class="items clearfix">
            <li class="item-li" v-for="(item,index) in sort.child" :key="index"
                :class="(activeClass[0]===sortindex && activeClass[1]===index) ? 'active' : ''"
                @click="selectsort(item,sortindex,index)">
              <span>{{item.c_name}}</span>
            </li>
          </ul>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import headTop from '../../components/header/Header'
  import { getSort2 } from '../../api/supervise'
  import { Toast, Indicator } from 'mint-ui'
  // 地址选择
  import {
    getVillages,
    searchKeywords,
    getOrderCity,
    getStreets,
    getDefault
  } from '../../api/orderVillage.js'
  import { saveOrderCityId, loadOrderCityId } from '../../common/js/cache'
  import { issueOrder } from '../../api/MyOrder'

  export default {
    name: 'OrderIssue',
    data () {
      return {
        whetherShow: false,
        // 地址开始
        // 小区
        data: {},
        keyword: '',
        cityName: '杭州',
        addressShow: false, // 查询地址(小区)弹窗显示
        // 城市
        cityShow: false, // 查询地址（城市）弹窗显示
        bills: [],
        lists: [],
        cityIds: '',
        // 地址结束
        popupVisible: false, // 类型弹窗
        closePopups: false, // 禁止点击弹窗遮罩层关闭
        activeClass: [-1, -1], // 选择类型的样式
        sortArray: [], // 类型分类
        sortId: '', // 存放选择的id
        typeName: '点击选择类型', // 存放选择的名字
        checkTitle: '', // 查验标题
        money: '', // 订单酬金
        totalCount: 800,
        currentCount: 0,
        issueText: '', // 查验简介
        pickerVisible: '', // 默认时间
        showTime: '请选择截止时间',
        storageTime: '', // 存放传入接口的时间
        cityId: 3,
        houseId: '', // 小区id
        homeName: '请选择查验地址',
        count: ''// 倒计时
      }
    },
    created () {
      // 当没有选择城市的时候就默认显示杭州的城市id
      if (loadOrderCityId() === undefined) {
        saveOrderCityId(3)
      }
      // 查验类型选择的数据
      this._getSort2()
      // 地址城市
      this._getOrderCity()
      this._getDefault()
      // 地址小区
      this._getVillages()
    },
    methods: {
      // 点击选择类型(弹窗)
      choseType () {
        this.popupVisible = true
      },
      // 选择类型弹窗的关闭
      popupClose () {
        this.popupVisible = false
      },
      _getSort2 () {
        getSort2().then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.sortArray = res.data
            // console.log(this.sortArray)
          }
        })
      },
      selectsort (item, sIndex, index) {
        // console.log(item)
        this.sortId = item.c_type_id
        this.typeName = item.c_name
        this.activeClass = [sIndex, index]
        this.popupVisible = false
      },
      // 地址-城市（可选区域）
      selectStyle (item) {
        setTimeout(() => {
          this.bills.forEach(item => {
            this.$set(item, 'active', false)
          })
          this.$set(item, 'active', true)
        }, 20)
        this.cityShow = false
        this.cityIds = item.id
        getVillages(this.cityIds).then(res => {
          this.data = res.data
          // console.log(res)
        })
      },
      // 获取城市
      _getOrderCity () {
        getOrderCity().then(res => {
          if (res.code === 200) {
            this.lists = res.data
          }
        })
      },
      // 根据城市获取各区域(热门城市)
      getStreet (itemId, item) {
        getStreets(itemId).then(res => {
          if (res.code === 200) {
            this.bills = res.data
          }
        })
        setTimeout(() => {
          this.lists.forEach((item, index) => {
            this.$set(item, 'active', false)
          })
          this.$set(item, 'active', true)
          this.cityId = item.id
          this.cityName = item.title
          // saveOrderCity(item.title)
          // 缓存城市id
          saveOrderCityId(this.cityId)
        }, 20)
      },
      // 获取默认的区域
      _getDefault () {
        getDefault().then(res => {
          this.bills = res.data
        })
      },
      // 地址：获取小区列表
      _getVillages () {
        getVillages(this.cityId).then(res => {
          this.data = res.data
          // console.log(res)
        })
      },
      // 搜索小区
      searchVillage () {
        searchKeywords(this.keyword).then(res => {
          if (res.code === 200) {
            this.data = res.data
          }
        })
      },
      goIssue (item) {
        this.houseId = item.id // 小区id
        this.homeName = item.title // 小区名字
        this.addressShow = false
      },
      // 判断输入的字体数
      writeContent () {
        this.currentCount = this.issueText.length
        let remainCounet = this.totalCount - this.currentCount
        if (!remainCounet) {
          Toast({
            message: '字数不能超过800',
            position: 'middle',
            duration: 1000
          })
        }
      },
      // 点击出现时间选择的弹窗
      openPicker () {
        this.pickerVisible = new Date() // 使默认时间变成当前时间
        this.$refs.picker.open()
      },
      // 时间转化
      handleConfirm () {
        // console.log(this.pickerVisible)
        // （中国标准时间格式）转换时间格式为年-月-日
        var d = new Date(this.pickerVisible)
        var youWant = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
        // console.log(youWant)
        this.showTime = youWant
        this.storageTime = youWant
      },
      // 点击选择小区（弹窗）
      chosePlot () {
        this.addressShow = true
      },
      // 点击切换城市(弹窗)
      goCity () {
        this.cityShow = true
      },
      // 点击城市弹窗的返回按键关闭该弹窗
      closePopup () {
        this.cityShow = false
      },
      // 点击小区弹窗的返回按键关闭该弹窗
      closeHousePopup () {
        this.addressShow = false
      },
      // 确认发布
      orderSub () {
        setTimeout(function () {
          Indicator.close()
        }, 3000)
        // 判断填写的内容
        if (!this.sortId) {
          Toast({
            message: '请选择查验类型',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.checkTitle) {
          Toast({
            message: '请输入查验标题',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.storageTime) {
          Toast({
            message: '请选择截止时间',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.houseId) {
          Toast({
            message: '请选择查验地址',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (!this.issueText) {
          Toast({
            message: '请输入查验的内容',
            position: 'middle',
            duration: 2000
          })
          return
        }
        Indicator.open({
          text: '发布中...',
          spinnerType: 'fading-circle'
        })
        issueOrder(this.houseId, this.checkTitle, this.issueText, this.sortId, this.showTime).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Toast({
              message: res.data,
              position: 'middle',
              duration: 3000
            })
            this.threeGo()
            // history.replaceState({}, '', '/Home')
            // this.$router.push('/TakeOrder')
          }
          if (res.code === 400) {
            Indicator.close()
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
            return
          }
        })
      },
      // 二秒后跳转页面
      threeGo () {
        const TIME_COUNT = 2
        if (!this.timer) {
          this.count = TIME_COUNT
          this.show = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.show = true
              clearInterval(this.timer)
              this.timer = null
              // 跳转的页面写在此处
              history.replaceState({}, '', '/Home')
              this.$router.push('/TakeOrder')
            }
          }, 1000)
        }
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../common/sass/mixin.scss';

  .order_issue {
    padding-top: 40px;
    padding-bottom: 40px;
    .issue_main {
      .classfiy {
        padding: 0 10px;
        border-bottom: 10px solid #f2f2f2;
        .line {
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          border-bottom: 1px solid #d9d9d9;
        }
        .chose-btn {
          width: 200px;
          height: 40px;
          p {
            font-size: 15px;
            color: #2585d0;
            line-height: 40px;
          }
        }
      }
      .issue_input {
        border-bottom: 10px solid #f2f2f2;
        ul {
          padding: 0 10px;
          .special_li {
            font-size: 1.3rem;
            height: 48px;
            line-height: 48px;
            border-bottom: 1px solid #d9d9d9;
            display: -moz-flex;
            display: -ms-flex;
            display: -webkit-flex;
            display: -webkit-box;
            display: flex;
            align-items: center;
            justify-content: left;
            input {
              width: 42%;
              border: none;
              outline: none;
              font-size: 1.2rem;
              color: #888888;
            }
          }
          li {
            font-size: 1.3rem;
            height: 48px;
            line-height: 48px;
            border-bottom: 1px solid #d9d9d9;
            display: -moz-flex;
            display: -ms-flex;
            display: -webkit-flex;
            display: -webkit-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .blue_font {
              color: #2585d0;
              font-size: 14px;
            }
            .point_out {
              font-size: 18px;
              color: #ababab;
            }
          }
          li:last-child {
            border-bottom: none;
          }
        }
      }
      .issue_text {
        padding: 10px;
        position: relative;
        .issue_title {
          padding: 10px 0;
          span {
            font-size: 15px;
            color: #292929;
          }
        }
        textarea {
          margin-top: 5px;
          box-sizing: border-box;
          width: 100%;
          padding: 10px;
          height: 150px;
          background: #f2f2f2;
          border-radius: 7px;
          resize: none;
          outline: none;
          border: none;
          font-size: 12px;
          line-height: 16px;
        }
        .count {
          position: absolute;
          bottom: 20px;
          right: 20px;
          color: #0078de;
        }
      }
      .issue_btn {
        width: 100%;
        text-align: center;
        button {
          width: 90%;
          height: 44px;
          background: #0078de;
          outline: none;
          border: none;
          border-radius: 5px;
          font-size: 15px;
          color: #ffffff;
        }
      }
    }
    .addressHeight {
      width: 100%;
      border-radius: 5px;
      .village {
        .p_title {
          width: 100%;
          height: 40px;
          background: #2585d0;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .back_Arrow {
            width: 50px;
            height: 40px;
            text-align: center;
            span {
              line-height: 40px;
              font-size: 22px;
            }
          }
          span {
            font-size: 15px;
            color: #ffffff;
            padding: 0 10px;
          }
        }
        .plot-wrapper {
          width: 100%;
          padding-top: 40px;
          background: #fff;
          .search {
            width: 100%;
            position: fixed;
            top: 40px;
            left: 0;
            background-color: #fff;
            text-align: center;
            height: 44px;
            line-height: 44px;
            .now-plot {
              padding-left: 10px;
              text-align: left;
              font-size: 15px;
              height: 40px;
              line-height: 40px;
              background-color: #D9D9D9;
            }
            .search-wrapper {
              display: inline-block;
              height: 30px;
              line-height: 30px;
              width: 80%;
              margin: 0 10px;
              border-radius: 4px;
              background-color: #e6e6e6;
              input {
                width: 118px;
                font-size: 14px;
                outline: none;
                border: none;
                background-color: #e6e6e6;
                &::-ms-input-placeholder {
                  text-align: center;
                }
                &::-webkit-input-placeholder {
                  text-align: center;
                }
              }
              .search-icon {
                display: inline-block;
                width: 17px;
                height: 17px;
                background-size: 17px 17px;
                background-repeat: no-repeat;
                @include bgimg('../../components/home/images/search');
                vertical-align: middle;
              }
            }
          }
        }
      }
      height: 90%;
      .mint-indexlist {
        height: 80%;
      }
      .mint-indexlist-content {
        height: 100% !important;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
      }
      .mint-cell-wrapper {
        background-size: 120% 0px;
      }
    }
    .cityHeight {
      width: 100%;
      border-radius: 5px;
      height: 90%;
      .city_box {
        .p_title {
          width: 100%;
          height: 40px;
          background: #2585d0;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            font-size: 15px;
            color: #ffffff;
            padding: 0 10px;
          }
          .back_Arrow {
            width: 50px;
            height: 40px;
            text-align: center;
            span {
              line-height: 40px;
              font-size: 22px;
            }
          }
        }
        .current_city {
          width: 100%;
          height: 72px;
          p {
            font-size: 15px;
            padding-top: 15px;
            padding-left: 10px;
          }
          .location {
            img {
              width: 13px;
              height: 17px;
              float: left;
              margin-left: 10px;
              padding-top: 10px;
            }
            span {
              font-size: 13px;
              color: #0078de;
              float: left;
              margin-left: 10px;
              line-height: 40px;
            }
          }
        }
        /*可选区域部分的样式*/
        .chose_area {
          width: 100%;
          .chose_header {
            width: 100%;
            height: 44px;
            border-bottom: 1px solid #d7d7d7;
            span {
              font-size: 15px;
              line-height: 44px;
              margin-left: 10px;
            }
          }
          .area_chose {
            margin: 0 10px;
            padding-bottom: 10px;
            height: 150px;
            ul {
              li {
                float: left;
                margin-top: 10px;
                margin-right: 5px;
                text-align: center;
                padding: 0 10px;
                h4 {
                  font-size: 13px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }
            }
          }
        }
        .active {
          color: #0078de;
          border: 1px solid #0078de;
          border-radius: 5px;
        }
        .unactive {
          color: #292929;
          border: 1px solid #d9d9d9;
          border-radius: 5px;
        }
        /*热门城市部分的样式*/
        .hot_city {
          width: 100%;
          .hot_header {
            width: 100%;
            height: 44px;
            border-bottom: 1px solid #d7d7d7;
            span {
              font-size: 15px;
              line-height: 44px;
              margin-left: 10px;
            }
          }
          .hot_chose {
            padding: 10px;
            ul {
              li {
                height: 36px;
                float: left;
                margin-right: 10px;
                text-align: center;
                border-radius: 5px;
                margin-bottom: 5px;
                p {
                  line-height: 36px;
                  font-size: 13px;
                  padding-left: 20px;
                  padding-right: 20px;
                }
              }
            }
          }
        }

        /*城市列表*/
        .city_one {
          .letter {
            width: 100%;
            height: 40px;
            background: #d9d9d9;
            margin-bottom: 10px;
            span {
              font-size: 15px;
              line-height: 40px;
              padding-left: 10px;
            }
          }
          .city_list {
            width: 100%;
            ul {
              li {
                width: 100%;
                height: 40px;
                border-bottom: 1px solid #d7d7d7;
                span {
                  line-height: 40px;
                  font-size: 15px;
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }
      .mint-indexlist {
        height: 80%;
      }
      .mint-indexlist-content {
        height: 100% !important;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
      }
      .mint-cell-wrapper {
        background-size: 120% 0px;
      }
    }
    .popup-box {
      width: 100%;
      height: 90%;
      overflow: scroll;
      .box-main {
        .box-top {
          display: -webkit-box;
          display: -moz-box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          align-items: center;
          height: 40px;
          background: #2585d0;
          .close {
            font-size: 30px;
            height: 40px;
            width: 45%;
            line-height: 40px;
            margin-left: 10px;
            color: #ffffff;
          }
          span {
            font-size: 15px;
            color: #ffffff;
          }
        }
        .type-ul {
          border-bottom: 5px solid #f2f2f2;
          padding-bottom: 5px;
          .ul-title {
            padding: 20px 0;
            font-size: 15px;
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            span {
              font-size: 20px;
              color: #2585d0;
            }
          }
          .items {
            .item-li {
              width: 86.25px;
              height: 32px;
              float: left;
              -moz-box-sizing: border-box;
              -webkit-box-sizing: border-box;
              border: 1px solid #d9d9d9;
              margin-left: 6px;
              text-align: center;
              margin-top: 5px;
              border-radius: 5px;
              span {
                font-size: 14px;
                line-height: 32px;
                color: #292929;
              }
            }
            .active {
              border: 1px solid #0078de;
              span {
                color: #0078de;
              }
            }
          }
        }
      }
    }
  }
</style>
